<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }
        li{
            padding: 5px 15px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <input type="text" placeholder="请输入用户名" v-model="name">
        <input type="text" placeholder="请输入用户id" v-model="id">
        <button @click="add">添加</button>
        <ul>
            <li v-for="item in arr" :key="item.id">
                <input type="checkbox">{{item.name}}
            </li>
        </ul> -->
        <ul>
            <router-link tag="li" to="/page/英雄联盟">英雄联盟</router-link>
            <router-link tag="li" to="/page/绝地求生">绝地求生</router-link>
            <router-link tag="li" to="/page/王者荣耀">王者荣耀</router-link>
            <router-link tag="li" to="/page/云顶之弈">云顶之弈</router-link>
        </ul>
        <!-- 给router-view绑定一个key是$route.fullpath作用是只要完全的路由地址发生变化就重新触发声明周期
        重新加载页面 -->
        <router-view :key="$route.fullPath"></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        const page1 = {
        
            template: `
                <div>{{msg}}</div>
            `,
            data() {
                return {
                    msg: ''
                }
            },

            created() {
                //
                this.msg = this.$route.params.name
                console.log(this.$route)
            }
        }
        let router = new VueRouter({
            routes: [
                {
                    path: '/page/:name',
                    component: page1
                }
            ]
        })
        new Vue({
            el: '#app',
            router,
            data: {
                name: '',
                id: '',
                arr: [
                    {
                        name: "张三",
                        id: 1
                    },
                    {
                        name: "李四",
                        id: 2
                    },
                    {
                        name: "王五",
                        id: 3
                    }
                ]
            },

            methods:{
                add() {
                    var obj = {
                        name: this.name,
                        id: this.id
                    }
                    this.arr.unshift(obj)
                }
            }
        })
    </script>
</body>
</html>